<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="syncValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: "WangEditor",
  components: { Editor, Toolbar },
  props:{
    value:String,
  },
  model:{
    event:'update:value',
    prop: 'value'
  },
  computed:{
    syncValue:{
      get(){
        return this.value
      },
      set(val){
        this.$emit('update:value',val)
      }
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          ['fontSize']:{
            fontSizeList: ["10px", "12px", "14px", "16px", "18px", "20px", "22px", "24px",
              "26px", "28px", "30px", "32px", "34px", "36px", "38px", "40px", "42px", "44px",
              "46px", "48px", "50px", "52px", "54px", "56px", "58px", "60px", "62px", "64px",
              "66px", "68px", "70px", "72px", "74px", "76px", "78px", "80px", "82px", "84px",
              "86px", "88px", "90px", "92px", "94px", "96px", "98px", "100px", "102px", "104px",
              "106px", "108px", "110px", "112px", "114px", "116px", "118px", "120px", "122px",
              "124px", "126px", "128px", "130px", "132px", "134px", "136px", "138px", "140px",
              "142px", "144px", "146px", "148px", "150px", "152px", "154px", "156px", "158px",
              "160px", "162px", "164px", "166px", "168px", "170px", "172px", "174px", "176px",
              "178px", "180px", "182px", "184px", "186px", "188px", "190px", "192px", "194px",
              "196px", "198px", "200px"]
          },
        }
      },
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      const list = []
      for (let i = 10; i <= 200; i+=2) {
        list.push(i+'px')
      }
      console.log(list)
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style lang="css" src="@wangeditor/editor/dist/css/style.css"/>
